<template>
  <div
    class="tools text-sm flex justify-start items-center w-full h-6 bg-gray-800 p-2"
  >
    <!-- 运行状态按钮 -->
    <div
      @click="useCodeStore.runCode"
      class="bg-gradient-to-r from-teal-400 via-blue-500 to-purple-600 text-white px-4 py-2 cursor-pointer hover:opacity-80 transition duration-300"
    >
      Running Code
    </div>
    <!-- 语言选择按钮 -->
    <Popover>
      <PopoverButton
        class="bg-blue-500 text-white px-4 py-2 hover:bg-blue-700 w-auto"
      >
        {{ useCodeStore.Currentlanguages }}
      </PopoverButton>
      <PopoverPanel
        class="absolute z-10 bg-white shadow-lg break-words rounded-sm p-2 w-auto"
      >
        <div class="grid grid-cols-1 gap-2">
          <span
            @click="useCodeStore.changeLanguage(language)"
            :class="
              useCodeStore.Currentlanguages === language ? 'bg-blue-500 ' : ''
            "
            v-for="language in useCodeStore.supportLanguages"
            :key="language"
            class="color-gray-500 w-auto hover:bg-gray-200 p-2 rounded-sm cursor-pointer"
            >{{ language }}</span
          >
        </div>
      </PopoverPanel>
    </Popover>

    <!-- 字号选择按钮 -->
    <Popover>
      <PopoverButton
        class="bg-blue-500 text-white px-4 py-2 hover:bg-blue-700 w-auto"
      >
        FontSize
      </PopoverButton>
      <PopoverPanel
        class="absolute ml-1 z-10 bg-white shadow-lg break-words rounded-sm mt-2 p-4 w-auto"
      >
        <div class="grid grid-cols-1 gap-4">
          <span class="color-gray-500 w-auto">12px</span>
          <span class="color-gray-500 w-auto">14px</span>
          <span class="color-gray-500 w-auto">16px</span>
        </div>
      </PopoverPanel>
    </Popover>
    <!-- 主题选择按钮 -->
    <Popover>
      <PopoverButton
        class="bg-blue-500 text-white px-4 py-2 hover:bg-blue-700 w-auto"
      >
        Theme
      </PopoverButton>
      <PopoverPanel
        class="absolute ml-1 z-10 bg-white shadow-lg break-words rounded-sm mt-2 p-4 w-auto"
      >
        <div class="grid grid-cols-1 gap-4">
          <span class="color-gray-500 w-auto">Light</span>
          <span class="color-gray-500 w-auto">Dark</span>
          <span class="color-gray-500 w-auto">System</span>
        </div>
      </PopoverPanel>
    </Popover>
    <!-- TIPS -->
    <Popover>
      <PopoverButton
        class="bg-gradient-to-r from-teal-400 via-blue-500 to-purple-600 text-white px-4 py-2 hover:opacity-80"
      >
        TIPS (Necessary)
      </PopoverButton>
      <PopoverPanel
        class="absolute ml-[-32px] z-10 bg-white shadow-lg break-words rounded-sm mt-2 p-4 w-auto"
      >
        <div class="grid grid-cols-1 gap-4">
          <span class="color-gray-500 w-auto">支持JS、TS实时语法检测</span>
          <span class="color-gray-500 w-auto"
            >Java请输入template生成模版编写</span
          >
          <span class="color-gray-500 w-auto"
            >go语言的main函数返回值必须为0</span
          >
          <span class="color-gray-500 w-auto"
            >c语言和c++,main函数的返回值必须为0</span
          >
        </div>
      </PopoverPanel>
    </Popover>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Popover, PopoverButton, PopoverPanel } from '@headlessui/vue'

import CodeStore from '../store/index.js'
const useCodeStore = CodeStore()
//获取支持的语言列表
useCodeStore.getSupportCode()
</script>

<style scoped>
.tools {
  background-color: #2d2d2d;
  padding: 10px;
  border-radius: 5px 5px 0 0;
}

.tool-item {
  padding: 8px 12px;
  margin-right: 8px;
  border-radius: 6px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.tool-item:hover {
  background-color: #3b3b3b;
  transform: translateY(-2px);
}

.tool-item:first-child {
  margin-left: 0;
}

.tool-item:last-child {
  margin-right: 0;
}

/* Select element custom styling */
select {
  color: white; /* White text */
  border-radius: 4px; /* Rounded corners */
  border: 1px solid #444; /* Border with a darker color */
}

option {
  background-color: #333; /* Dark background for options */
  color: white; /* White text for options */
}
</style>
